<%--
  Created by IntelliJ IDEA.
  User: ajinlong
  Date: 2020/12/23
  Time: 23:34
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--<%@include file="head.jsp"%>--%>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width initial-scale=1.0">
    <style>
        * {
            padding: 0;
            margin: auto;
        }

        a {
            color: blue;
        }

        l
        a:hover {
            color: gold;
        }
    </style>

    <title>登录界面</title>
</head>

<body>
<iframe src="header.jsp" scrolling="no" frameborder="0" width="100%" height="260px;"></iframe>
<!-- 登录的界面 -->
<div style="background-image: url('images/images/login_bg.jpg'); width:960px;height: 388px;position: relative;">
    <div
            style="width: 400px;height: 280px; background-color: white;border-left: 2px solid #e0e0df;border-right: 2px solid  #e0e0df; position: absolute;left: 510px;top: 65px;">

        <p style="text-align: right; margin-top: 30px;margin-right: 20px; font-size: 13px;color: #9c9c9c;">
            还不是商城用户？&nbsp;&nbsp;<a href="register.jsp" style="text-decoration: none;">立即注册</a></p>

        <%--        TODO 这里应该跳转到商城首页--%>
        <form id="loginForm" action="homepage.jsp">
            <table style="border-spacing: 0 28px;">
                <tr>
                    <td style="text-align: right;">登录名&nbsp;&nbsp;</td>
                    <td><input id="account" type="text" style="width:200px ;height: 23px;" placeholder="请输入账号"></td>
                </tr>
                <tr>
                    <td style="text-align: right;">密&nbsp;&nbsp;码&nbsp;&nbsp;</td>
                    <td><input id="password" type="password" style="width:200px ;height: 23px;" placeholder="请输入密码">
                    </td>
                </tr>
                <tr>
                    <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
                    <td>
                        <input id="confirm" type="submit" value="登录"
                               style="width: 100px;height: 40px;
                            background-color: orange;color:white; font-weight: bold;
                            padding-left: 25px;padding-right: 25px;border:none;border-radius: 5px;">
                    </td>
                </tr>
            </table>
        </form>

    </div>
</div>

<script src="js/jquery-3.5.1.js"></script>
<script>

    // $(function (){
    //     //TODO
    //     $("#loginForm").submit(function () {
    //         let name = $("#account").val();
    //         let nameJson = {"username":"name"};
    //         let flag = false;
    //         //url,json对象,回调函数()
    //         $.post("checkRegisterServlet", nameJson, function (data, code) {
    //             alert(data);
    //         });
    //         return flag;
    //     });
    // })

    $(function () {
        $("#loginForm").submit(function () {
            let name = $("#account").val();
            let password = $("#password").val();
            let nameJson = {"name": name, "password": password};
            let flag = false;
            //url,json对象,回调函数()
            $.post("loginServlet", nameJson, function (data, code) {
                if (data == "false") {
                    alert("请检查用户名或者密码");
                    flag = false;
                    alert("flag"+flag);
                } else {
                    alert("成功登录");
                    flag = true;
                    alert("flag"+flag);
                }
            });

            // alert("测试回调函数");

            return true;
        });
    })

    //这两种写法都会被执行的
    // $(alert("我在测试jquery"))
    // alert("我在测试jquery的外面");


</script>
</body>

</html>